<template>
  <view class="container">
    <view class="header">
      <view class="search">
        <uv-search
          placeholder="请输入产品"
          v-model="search"
          :showAction="false"
          bgColor="#f7f8fa"
          :clearabled="true"
          @search="OnSearch"
        ></uv-search>
      </view>
    </view>

    <scroll-view
      class="list"
      :scroll-y="true"
      :refresher-triggered="refresh"
      :refresher-enabled="true"
      @refresherrefresh="OnRefresh"
      @scrolltolower="OnScrollTolower"
      refresher-background="#fff0"
      :style="`height:${WindowHeight}px;`"
    >
      <view class="item" v-for="(item, index) in list" :key="item.id">
        <view class="title"> {{ item.products.name }} </view>

        <view class="line"></view>

        <view class="son-list">
          <view class="son-item">
            <view class="name"> 查询次数： </view>
            <view class="value"> {{ item.query_num ?? 0 }} </view>
          </view>

          <view class="son-item">
            <view class="name"> 您查询的防伪码： </view>
            <view class="value" @click="OnCopy(item.query_code)">
              {{ item.query_code ?? "" }}
            </view>
          </view>

          <view class="son-item">
            <view class="name"> 首次查询时间： </view>
            <view class="value"> {{ item.query_time_text }} </view>
          </view>

          <view class="son-item" @click="OnOpenQrCode(item, index)">
            <view class="name"> 二维码： </view>
            <view class="value">
              <image src="/static/images/code.png" />
            </view>
          </view>
        </view>
      </view>

      <uv-load-more :status="status" />
      <!-- 返回顶部 -->
      <uv-back-top></uv-back-top>
    </scroll-view>
  </view>

  <!-- 消息提示 -->
  <uv-toast ref="NoticeRef"></uv-toast>

  <!-- 弹出层 -->
  <uv-popup
    ref="PopupRef"
    :safeAreaInsetBottom="false"
    :round="'10px'"
    mode="center"
  >
    <view class="qrcode">
      <uv-image
        :showLoading="true"
        :src="QrCode"
        width="240px"
        height="240px"
      ></uv-image>
    </view>
  </uv-popup>
</template>

<script setup>
// this代理
const { proxy } = getCurrentInstance();
// 用户数据
const business = proxy.$business;
// 搜索框内容
const search = ref("");
// 下拉刷新状态
const refresh = ref(false);
// 上拉加载结束状态
const finished = ref(false);
// 数据
const list = ref([]);
// 当前页
const page = ref(1);
// 每页显示的数据条数
const limit = ref(10);
// 加载更多状态
const status = ref("loading");
// 消息提示
const NoticeRef = ref("");
// 窗口高度
const WindowHeight = ref(0);
// 防伪二维码
const QrCode = ref("");
// 弹出层
const PopupRef = ref(null);

// 页面生命周期
onLoad(() => {
  // 获取当前设备的窗口高度
  uni.getSystemInfo({
    success: (res) => {
      WindowHeight.value = res.windowHeight;
    },
  });
  // 获取商品数据
  GetProductData();
});

// 下拉刷新
const OnRefresh = () => {
  if (refresh.value === true) return;

  page.value = 1;
  list.value = [];
  refresh.value = true;
  finished.value = false;
  status.value = "loading";

  setTimeout(GetProductData, 1000);
};

// 上拉加载
const OnScrollTolower = () => {
  if (finished.value === true) return;
  GetProductData();
};

// 获取商品数据
const GetProductData = async () => {
  if (refresh.value === true) {
    refresh.value = false;
  }
  // 组装数据
  const params = {
    busid: business.value.id,
    page: page.value,
    limit: limit.value,
    search: search.value,
  };
  // 发起请求 查找fa_product_order_product表
  const result = await uni.$uv.http.post("/business/list", params);
  // 处理请求结果
  if (result.code === 1) {
    const count = result.data ? result.data.count : 0;
    list.value = result.data ? list.value.concat(result.data.list) : [];
    // 结束加载
    if (list.value.length >= count) {
      finished.value = true;
      status.value = "nomore";
      return;
    }
    page.value += 1;
  } else {
    finished.value = true;
    status.value = "nomore";
    NoticeRef.value.show({
      type: "error",
      message: result.msg,
    });
  }
};

// 点击搜索
const OnSearch = () => {
  OnRefresh();
};

// 打开防伪二维码
const OnOpenQrCode = async (item, index) => {
  // 判断是否有防伪码 有就直接赋值
  if (item.query_qrcord) {
    QrCode.value = item.query_qrcord_text;
  } else {
    // 没有就发起请求生成一个
    // 组装参数
    const params = {
      code: item.query_code,
    };
    // 发起请求
    const result = await uni.$uv.http.post("/business/generate", params);
    // 处理请求结果
    if (result.code === 1) {
      QrCode.value = result.data.query_qrcord_text;
      list.value[index].query_qrcord = result.data.query_qrcord;
      list.value[index].query_qrcord_text = result.data.query_qrcord_text;
    } else {
      NoticeRef.value.show({
        type: "error",
        message: result.msg,
      });
      // 结束
      return;
    }
  }
  // 显示弹出层
  PopupRef.value.open();
};

// 复制防伪码
const OnCopy = (code) => {
  uni.setClipboardData({
    data: code,
    showToast: false,
    success: function () {
      // 手动关闭默认轻提示
      uni.hideToast();
      // 设置轻提示
      NoticeRef.value.show({
        type: "success",
        message: "防伪码复制成功",
      });
    },
  });
};
</script>

<style>
page {
  background-color: #eee;
}

.container {
  width: 95%;
  margin: 0 auto;
}

.header {
  background-color: #fff;
  padding: 10px 0;
  margin-top: 10px;
  border-radius: 10px;
}

.header .search {
  width: 95%;
  margin: 0 auto;
}

.item {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 10px;
  padding: 0 10px 10px;
}

.list {
  /* 底部安全区域 */
  margin-bottom: 0;
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
  background-color: transparent;
}

.item .title {
  padding: 10px 0 10px 10px;
  font-size: 20px;
}

.item .line {
  width: 100%;
  height: 1px;
  background: #ebebeb;
  margin: 0 auto;
  margin-bottom: 10px;
}

.item .son-list .son-item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 10px;
}

.item .son-list .son-item .name {
  color: #9b9b9a;
}

.item .son-list .son-item image {
  width: 30px;
  height: 30px;
}

.item .title {
  white-space: nowrap; /* 强制文本不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}
</style>